$header-title-color : rgb(51,51,51);

.primary-recommend{
  margin-top: 20px;
  width: 100%;
  
  .header{
    width: 100%;
    height: 22px;

    .title{
      display: inline-block;
      font-size: 22px;
      float: left;
      clear: both;
      color : $header-title-color;
    }
    
    .pager{
      display: inline-block;
      float: right;
      div{
        color: #aeaeae;
        display: inline-block;
        border:1px solid #aeaeae;
        height: 22px;
        line-height: 22px;
        width: 48px;
        text-align: center;
        cursor: pointer;
      }
      .active,.active:hover{
        color : #666666;
      }
      div:hover{
        color: $primary-color;
      }
    }
  }

  .body {
    margin-top: 10px;
    overflow: hidden;
    ul{
      width: 2880px;
      height: 340px;
    }
    li{
      margin: 0;
      padding: 0;
      width: 232px;
      float: left;
      margin: 10px;
    }


    li:nth-child(5n+1){
      border-top: 1px solid #ffac13 ;
      margin-left: 0;
    }
    li:nth-child(5n+2){
      border-top: 1px solid #83c44e ;
    }
    li:nth-child(5n+3){
      border-top: 1px solid #2196f3 ;
    }
    li:nth-child(5n+4){
      border-top: 1px solid #e53935 ;
    }
    li:nth-child(5n+5){
      border-top: 1px solid #00c0a5 ;
      margin-right: 0;
    }
    
    a{
      display: block;
      margin: auto;
      width: 230px;
      height: 340px;
      text-align: center;
      background: #fafafa;
      @include unstyled-link();
      img{
        margin-top: 90px;
      }
      .title{
        margin: 8px 0;
        color: #333333;
      }
      .desc{
        font-size: .75em;
        color : #a3a3a3;
      }
      .price{
        margin-top: 16px;
        color: $primary-color;
        font-size: .875em;
      }
    }
  }



}